<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>主页面</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-submenu.css">

    <style>
        /* Make the image fully responsive */
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body id="fontSize">
<!-- 导航栏 -->
<div class="container" id="frontTop"></div>
<!--<h1>Hello World</h1>-->

<div class="container" id="mainpage">
    <!-- 轮播图 -->
    <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>

        <!-- 轮播图片 -->
        <div style="margin-top: 50px">
            <div class="carousel-inner" style="width: 100%">
                <div class="carousel-item active "
                     style="width: 100%; height: 400px">
                    <a href="#"> <img src="/images/1.jpg">
                    </a>
                </div>
                <div class="carousel-item" style="width: 100%; height: 400px">
                    <a href="#"> <img src="/images/2.jpg">
                    </a>
                </div>
                <div class="carousel-item" style="width: 100%; height: 400px">
                    <a href="#"> <img src="/images/3.jpg">
                    </a>
                </div>
            </div>

            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a> <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
        </div>
    </div>

    <!-- 查询 -->
    <div class="container" style="margin-top: 100px">
        <ul class="form-inline liMargin ">
            <li><a href="MajorDisplay" class="btn-primary btn"> 查专业</a></li>
            <li><a href="#" class="btn-primary btn"> 查院校</a></li>
            <li><a href="#" class="btn-primary btn"> 评测中心</a></li>
            <li><a href="#" class="btn-primary btn"> 智能填报</a></li>
            <li><a href="#" class="btn-primary btn"> 快捷工具</a></li>
        </ul>
    </div>
    <!-- 新闻资讯 -->
    <div class="container-fluid newsInformation">
        <div class="page-header">
            <h2>新闻资讯</h2>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="page-header">
                    <h3>新闻</h3>
                </div>
                <ul>
                    <li class="offset-10"><a href="#" style="color: #337ab7">更多</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>

                </ul>
            </div>
            <div class="col-md-4">
                <div class="page-header">
                    <h3>通知公告</h3>
                </div>
                <ul>
                    <li class="offset-10"><a href="#" style="color: #337ab7">更多</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>

                </ul>
            </div>
            <div class="col-md-4">
                <div class="page-header">
                    <h3>资讯</h3>
                </div>
                <ul>
                    <li class="offset-10"><a href="#" style="color: #337ab7">更多</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>
                    <li><a href="#"
                           style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;">志愿填报是高考录取之前的一个项目，是考生进入大学的一个必经项目，关系到广大学子的命运。</a></li>

                </ul>
            </div>
        </div>

    </div>

    <!--热点关注 -->
    <div class="container-fluid hotSpotConcerns">
        <div class="page-header">
            <h2>热点关注</h2>
        </div>
        <div id=pictureScroll
             style="overflow: hidden; width: 100%; border: 2px solid #e0e0e0; padding: 2px;"
             onmouseover="stopscroll();" onmouseout="doscroll()">
            <div id="pictureScroll1" style="white-space: nowrap; padding: 0;">
                <a href="#"><img src="/images/1.jpg" height=200 width=256
                                 border=0></a> <a href="#"><img src="/images/1.jpg"
                                                                height=200 width=256 border=0></a> <a href="#"><img
                    src="/images/1.jpg" height=200 width=256 border=0></a> <a
                    href="#"><img src="/images/1.jpg" height=200 width=256
                                  border=0></a> <a href="#"><img src="/images/1.jpg"
                                                                 height=200 width=256 border=0></a> <a href="#"><img
                    src="/images/1.jpg" height=200 width=256 border=0></a>
            </div>
        </div>
    </div>
    <!--热门院校  -->
    <div class="container-fluid popularUniversities"
         style="margin-top: 50px">
        <div class="page-header">
            <h2>热门院校</h2>
            <h5>
                <a class="offset-11" href="#">更多》</a>
            </h5>
        </div>
        <ul class="form-inline">

            <li><a href="#"><img src="/images/1.jpg" width="230px"
                                 height="200px"> </a></li>
            <li><a href="#"><img src="/images/1.jpg" width="230px"
                                 height="200px"> </a></li>
            <li><a href="#"><img src="/images/1.jpg" width="230px"
                                 height="200px"> </a></li>
            <li><a href="#"><img src="/images/1.jpg" width="230px"
                                 height="200px"> </a></li>
        </ul>
    </div>
    <!--精品课程推荐  -->
    <div class="container-fluid excellentCourse">
        <div class="page-header">
            <h2>精品课程推荐</h2>
        </div>
        <ul class="form-inline" id="pictureEnlargement">
            <li>
                <ul>
                    <a href="#">
                        <li><div class="pictureEnlargement">
                            <img src="/images/1.jpg" />
                        </div></li>
                        <li>河南大学</li>
                    </a>
                </ul>
            </li>
            <li>
                <ul>
                    <a href="#">
                        <li><div class="pictureEnlargement">
                            <img src="/images/1.jpg" />
                        </div></li>
                        <li>河南大学</li>
                    </a>
                </ul>
            </li>
            <li>
                <ul>
                    <a href="#">
                        <li><div class="pictureEnlargement">
                            <img src="/images/1.jpg" />
                        </div></li>
                        <li>河南大学</li>
                    </a>
                </ul>
            </li>
            <li>
                <ul>
                    <a href="#">
                        <li><div class="pictureEnlargement">
                            <img src="/images/1.jpg" />
                        </div></li>
                        <li>河南大学</li>
                    </a>
                </ul>
            </li>
        </ul>
    </div>

    <div class=" container  ">
        <div class="page-header">
            <h3>&nbsp&nbsp&nbsp友情链接</h3>
        </div>
    </div>
    <div class="container-fluid friendshipLink">
        <ul class="form-inline ">
            <li><a href="#">中国教育部</a></li>
            <li><a href="#">河南省教育厅</a></li>
            <li><a href="#">河南省招生办公室</a></li>
            <li><a href="#">大学排行榜</a></li>
            <li><a href="#">高考招生网</a></li>
            <li><a href="#">高考资源网</a></li>
        </ul>
    </div>
</div>
<!--底部信息  -->
<div class="container" id="frontBottom"></div>
<!-- jq引用 -->
<script src="/js/jquery-3.3.0.js"></script>
<script src="/layui/layui.js"></script>
 <!--bootstrap引用 -->
<script src="/bootstrap/bootstrap.min.js"></script>
<script src="/js/publicSection.js"></script>
<script>
    // $("#frontTop").load("frontTop");
    // $("#frontBottom").load("frontBottom");
    //实现图片滚动效果
    var t = pictureScroll.scrollWidth
    pictureScroll1.innerHTML += pictureScroll1.innerHTML
    function doMarquee() {
        pictureScroll.scrollLeft = pictureScroll.scrollLeft < pictureScroll.scrollWidth
        - pictureScroll.offsetWidth ? pictureScroll.scrollLeft + 1
            : t - pictureScroll.offsetWidth
    }
    function doscroll() {
        sc = setInterval(doMarquee, 20)
    }
    function stopscroll() {
        clearInterval(sc)
    }
    doscroll()
</script>
</body>
</html>